<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>极风小说</title>
	{{ include './tpl/css.html' }}
	<style type="text/css">
	html,body{width:100%;height:100%;overflow:hidden;background-color:#3a3842;}
	.body-wrap2{
		padding:20px;
		height:100%;
		width:100%;
		overflow-y:auto;
		box-sizing:border-box;
		position:relative;
	}
	.b100{top:-100%;}
	.novel-block{
		text-align:center;
		border-bottom:5px solid #ff6600;
		padding-bottom:15px;
		margin-bottom:20px;
	}
	.novel-block img{height:200px;max-width:100%;cursor:pointer;}
	.novel-block p{display:block;text-align:center;color:#35b192;cursor:pointer;}
	.tool{
		position:fixed;
		right:-570px;
		top:100px;
		z-index:100;
		transition: right .3s ease;
	}

	.add-book{
		display:inline-block;
		width:50px;
		height:50px;
		position:absolute;
		top:0px;
		left:-60px;
		background-color: white;
		line-height:50px;
		text-align:center;
		border-radius: 5px;
		opacity: 1;
		float:left;
		cursor:pointer;
	}
	.tool.tool-show{right:10px;}
	.tool.tool-show .add-book{
		top:-50px;
		left:0px;
	}
	.book-info{
		float:left;
		background-color: white;
		opacity: 1;
		width:560px;
		border-radius: 5px;
	}
	.byy-label{width:70px;}
	.caption-block{
		color:white;
		float:left;
		width:33%;
		padding:10px;
		box-sizing:border-box;
	}
	.caption-block a{color:white;font-size:16px;}
	h3{
		font-size:20px;
		color:white;
		margin:20px;
		text-align:center;
	}
	@media screen and (max-width:768px){
		/*.book-info{
			width:110% !important;
		}
		.tool{
			right:-100%;
		}*/
		.tool{
			display:none;
		}
		.caption-block{
			width:100% !important;
		}
	}
	input{
		background-color:#aaa;
	}
	</style>
</head>
<body>
	<div class="body-wrap2 byy-clear" id="book">
		{{ each novels value i}}
		<div class="col-xs-6 col-sm-2 col-md-2 col-lg-2 novel-block ">
			<img src="{{value.avatar}}" alt="{{value.title}}" id="{{value.id}}" title="{{value.title}}" filter="showBook">
			<p filter="showBook" title="{{value.title}}" id="{{value.id}}">{{ value.title }}</p>
		</div>
		{{ /each }}
	</div>
	<div class="tool">
		<span class="add-book" filter="showForm">
			<i class="byyicon icon-plus"></i>	
		</span>
		<div class="book-info" >
			<form action="" class="byy-form mini">
				
				<div class="byy-form-item">
					<label for="" class="byy-label">书名:</label>
					<div class="byy-block">
						<input type="text" name="title" placeholder="输入书名">
					</div>
				</div>
				<div class="byy-form-item">
					<label for="" class="byy-label">目录地址:</label>
					<div class="byy-block">
						<input type="text" name="url">
					</div>
				</div>
				<div class="byy-form-item">
					<label for="" class="byy-label">封面</label>
					<div class="byy-block">
						<div style="display:inline-block;" id="upload"><i class="byyicon icon-plus" style="line-height:38px;cursor:pointer;"></i></div>
						<input type="hidden" name="avatar">
					</div>
				</div>
				<div class="byy-form-item">
					<label for="" class="byy-label">描述:</label>
					<div class="byy-block">
						<textarea name="describ"></textarea>
					</div>
				</div>
				<div class="byy-form-item">
					<label for="" class="byy-label">作者</label>
					<div class="byy-block">
						<input type="text" name="authorname" >
					</div>
				</div>
				<div class="byy-form-item text-center">
					<span class="byy-btn" filter="save" id="save">提交进行抓取</span>
				</div>
			</form>			
		</div>
	</div>
	<div class="body-wrap2" id="caption">
		<h3 filter="showBook" id="title"></h3>
		<div id="caption-content">
			

		</div>
	</div>
</body>
</html>
{{ include './tpl/js.html' }}
<script type="text/javascript"></script>
<script type="text/javascript">

	var toggleBody = function(flag){
		if(flag == true){
			$('#book').addClass('b100');
			$('#caption').addClass('b100');
		}else{
			$('#book').removeClass('b100');
			$('#caption').removeClass('b100');
		}
	};
	var renderCaption = function(arr){
		var $container = $('#caption-content');
		$container.empty();
		arr.forEach(function(item){
			var title = item.title,id = item.id,novel = item.novel,captionno = item.captionno;
			$container.append('<div class="caption-block"><a href="/index/'+id+'.html" target="_blank"  id="'+id+'">'+title+'</a></div>');
		});
		toggleBody(true);
		byy.win.closeAll();
	}
	var actives = {
		toggleBody : function(flag){
			if(flag == true){
				$('#book').addClass('b100');
				$('#caption').addClass('b100');
			}else{
				$('#book').removeClass('b100');
				$('#caption').removeClass('b100');
			}
		},
		showForm : function(){
			$(this).parent().toggleClass('tool-show');
		},
		save : function(){
			var data = byy('.byy-form').getValues();
			if(data.title != '' && data.url != '' && data.avatar != ''){
				$.ajax({
					url : '/index/save',
					data : data,
					type : 'POST',
					success : function(res){
						byy.win.msg(res,{shift:-1},function(){
							location.reload();	
						});
					}
				});
			}else{
				byy.win.msg('内容填写不规范');
			}
		},
		showBook : function(ev){
			var id = this.attr('id'),title = this.attr('title');
			if(!byy.isEmpty(id) && id != 'title'){
				var lindex = byy.win.load(1);
				$.ajax({
					url : '/index/getCaption',
					type : 'POST',
					data : {id : id},
					success : function(res){
						var resobj = byy.json(res);
						$('#title').html(title);
						renderCaption(resobj);
					}
				});
			}else{
				actives.toggleBody(false);
			}
		}
	};
	byy.require(['jquery','win','uploader'],function(){

		$('[filter]').on('click',function(ev){
			var $this = $(this),type = $this.attr('filter');
			actives[type] && actives[type].call($this,ev);
		});

		//上传
		byy.uploader().simpleImage({
			selector : '#upload',
			server : '/index/upload',
			chunked : false,
			md5 : false,
			onSuccess : function(file,res){
				var path = res.path || '';
				$('input[name="avatar"]').val(path);
			}
		});

		var id = byy.getSearch('id');
		if(!byy.isEmpty(id)){
			//执行
			var $img = $('img#'+id);
			actives['showBook'].call($img);
		}
	});
	
</script>